<template>
	<div class="main">
		<div class="title">
			Search By Sequence
      <div class="subTitle">
        This is to search virus RNA products in our database by homology search with BLAST. Users are suggested to input one or more nucleotide sequences,
        select the target virus species (optional) and set the cutoff value (optional). For more details, please see <router-link class="a" to="/help">HELP</router-link> page.
      </div>
		</div>
		<el-form :model="ruleForm"
						 :rules="rules"
						 ref="ruleForm"
						 :hide-required-asterisk="true"
						 label-width="130px"
						 class="ruleForm">

			<div class="itemTitle">Type/paste query sequences in FASTA format: </div>
			<el-row :gutter="20">
				<el-col :span="22">
					<el-form-item label="" prop="sequence">
						<el-input type="textarea" v-model="ruleForm.sequence"
                      :rows="11"
            ></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item style="display: flex;">
				<div class="exampleBtn"  @click="egCLick">Example Sequence Nucleotide</div>
			</el-form-item>

			<el-row :gutter="20">
				<el-col :span="22">
					<el-form-item label="Virus Name :" prop="blastdbName">
						<el-select class="inputWidth" v-model="ruleForm.blastdbName" placeholder="">
							<el-option v-for="(n, idx) in speciesList" :label="n" :value="n"
												 :key="idx"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="18">
					<el-form-item label="Evalue :" prop="evalue">
            <el-dropdown>
              <el-input class="inputWidth input" v-model="ruleForm.evalue" placeholder="eg. 5e-1"></el-input>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(n, idx) in options" :key="idx" >
                  <div style="overflow: auto;width: 500px" @click="selectColumnChange(n.label)">
                    {{n.label}}
                  </div>
                  </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
					</el-form-item>
				</el-col>
			</el-row>

      <el-row :gutter="20">
        <el-col :span="18">
          <el-form-item label="Word Size :" prop="wordSize">
            <el-input class="inputWidth input" v-model="ruleForm.wordSize" placeholder="eg. 11"></el-input>
            <div class="notice">If the input sequence is less than 30nt, it is recommended to enter a value less than 10 for word size, otherwise no results may be outputed.</div>
          </el-form-item>
        </el-col>
      </el-row>


			<el-form-item style="display: flex;justify-content: center">
				<el-button @click="resetForm('ruleForm')">Reset</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">Run</el-button>
			</el-form-item>
		</el-form>


<!--    <iframe ref="frame"-->
<!--            id="iframe"-->
<!--            scrolling="auto"-->
<!--            frameborder="0"-->
<!--            :src="src"-->
<!--            @load="loadIFrame">-->
<!--      <div id="mapContainer"></div>-->
<!--    </iframe>-->

    <i-frame :key="key" :autoHeight="true" v-if="showView" ref="frameView" id="genView" :src="src"/>
	</div>
</template>

<script>
import IFrame from "@/components/iFrame";
import {blastdbList, createXML} from "../../api/search";
import {isNumber, isInteger} from "../../utils/validate";

  export default {
    name: "sequence",
    components: {IFrame},
    data() {

      var evalueNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('Evalue can\'t be empty'));
        }
        if (!isNumber(value)) {
          return callback(new Error('Evalue must be a number'));
        }
        callback();
      };

      var wordNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('Word Size can\'t be empty'));
        }
        if (!isInteger(value)) {
          return callback(new Error('Word Size must be a positive integer'));
        }
        callback();
      };
      return {
        src: process.env.NODE_ENV == 'production' ? '/VRPbase/static/kablamview/test2.html':'/static/kablamview/test2.html',
        ruleForm: {
          sequence: null,
          blastdbName: null,
          evalue: null,
          wordSize: '11'
        },
        rules: {
          sequence: [
            {required: true, message: 'Sequence can\'t be empty', trigger: 'blur'}
          ],
          blastdbName: [
            {required: true, message: 'Virus Name can\'t be empty', trigger: 'change'}
          ],
          evalue: [
            {required: true, validator: evalueNum}
          ],
          wordSize: [
            {required: true, validator: wordNum}
          ],
        },
				eg: ">X72954.1 African Swine Fever Virus gene J9L\n" +
          "ATTGAATCGTATAAAAATAACACGATTTTTATCAAATGTATACCACCGCTTTTATCAGAAAAAATAAATC\n" +
          "TATATATACCAAAAAATCGAATCAGAATTCCACTTTACTTTAAATCTTTAAAAACGTCTAAGTAATCACA\n" +
          "TTTTTATAATCTACTCCTAGTTCTGAAATAGGCTGGATTTCTTTTTTAAGCCCTTTAAACCAAGGATGTG\n" +
          "ATACAAGACCCTTAAAAGAAAGCCGCTTATTTTCATTAATTGTTAAACAATCCGTGATAAACTGTTTTCC\n" +
          "CGTCTCTGAAATGTTATCGGGAATATAGTTTTCTCCTTTCAGGATATCATTTAAATAAAAATTTTCTGCA\n" +
          "CGAAATCTAAAGAGATTAACCGCCACCATACCTATCGTCCACACCGTTAGAGGAAGCTGGTAGTAATAAC\n" +
          "CATAATAATAAAATTCTGGGCACACGTATTCCCATGTTCCAAACATATTATATTGAGGATGGGTTTCATT\n" +
          "TAATCGAACAGCGCTTCCAAAGTCAATGACCTTAATGATCTTTTGATCTATATCTATAATAAGGTTCTCA\n" +
          "TCCTTAATATCCCCGTGGATAAAGCCCTTCTCATAAATGTTTTGTATAATAAGAATCATCTGAAATATTA\n" +
          "TTTTTTTGGCTTCGTTTTCCTCAAGTTTTTTAAAGTAATGATAATGAAGTAGATCAATACTATTTGGAAT\n" +
          "ATATTCTATGATCAGTATATGATACATGGCATTTTCAGTATATTCAATAAGCTTAATAACTCCGGGAGTA\n" +
          "TCTTGCAGGGCTTTCATCACGACGACCTCATTTCCTGGAATTTCTTTTTTAGATACATACTTAAAAACAA\n" +
          "CTGGTTGCCCTACTTGATGACCCAAAAATACGTTATTTCTTCTACCACCCTCAAACATAGGTTTCGTTGC\n" +
          "AATGAAGTACATGTGCTCCGTTGTGGAGATCCTTTCCACCTTTATTGTAGGATAAACTGCATATTGTGCC\n" +
          "TGAGGGTTTTTTAACACTTTTTTAAACTGTTGTTCCGGCCTGGACATGTTTTATTAACTTTATATATAAA\n" +
          "GGATTAGAAGGTTTAATTTCAATATATGCCTTAATGATGGGATTGTATTCATAAAAGGTATAGCCTAATC\n" +
          "CTACCTCTTTGTTTTTTTGGTAAAAAA",
        speciesList: [],
        showView: false,
				key: 0,
        options: [{ label: '10' }, { label: '0.1' }, { label: '0.01' }, { label: '0.001' }],
      }
    },
    mounted() {
      this.getBlastdbList()
    },
    methods: {

			async getBlastdbList() {
        const res = await blastdbList()
        if (res.code == 200) {
          // 按字母大小排序
          res.data.sort((a,b) => {
            return a.localeCompare(b);
          });
          this.speciesList = res.data
        }
			},
			async createXMLData() {
        this.showView = true
        this.goView()
        const res = await createXML(this.ruleForm)
				if (res.code == 200) {
          this.$nextTick(() => {
            this.$refs.frameView.sendIFameMsg("showView", {data: res.data})
          })
				}
			},
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
						this.createXMLData()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      egCLick() {
        this.ruleForm.sequence = this.eg;
			},
      goView() {
        this.$nextTick(() => {
          // 实现滚动效果
          let top = document.documentElement.scrollTop
          let endY = document.getElementById("genView").offsetTop
          const timeTop = setInterval(() => {
            document.body.scrollTop = document.documentElement.scrollTop = top += 20
            if (top >= endY) {
              clearInterval(timeTop);
            }
          }, 3);
        })
      },
      selectColumnChange(val) {
        this.ruleForm.evalue = val
      }
    }
  }
</script>

<style lang="stylus" scoped>

	.main {
		width 1170px
		margin-top 20px
		padding-top 10px
		font-family: Times New Roman;

    #iframe {
      height: 100%;
      width: 100%;
    }

    .notis {
      color #bdbdbd
    }

		.title {
			font-size 28px
			text-align left
			margin-bottom 20px
			padding 15px 0
			color #11427D
			font-weight 800
		}

    .subTitle {
      margin-top 20px
      font-size 21px
      //color #0a2458
      color #7a7a7a

      .a {
        color #0a2458
        cursor pointer
        text-decoration underline
      }
      .a:hover {
        color #9c1919
      }
    }

		.middleTitle {
			margin 20px 0 10px 0
			color #11427d
			font-size 16px
			font-weight 600
		}

		.ruleForm {
			border: 1px solid #f0f0f0;
			border-radius: 16px;
			width: 100%;
			padding: 42px 50px;

			.inputWidth {
				width 550px
			}

      .notice {
        margin-top 10px
        color #a3a3a2
        line-height 1.2
        font-size 18px
      }

			.itemTitle {
				margin-left: 160px;
				margin-bottom 15px;
				color #606266
				font-size 24px
			}
		}

		.el-form-item /deep/ {
			label {
				padding: 0;
        font-size: 20px;
			}

			.el-form-item__content {
				margin-left: 160px!important;
			}

			.el-textarea__inner:focus {
				outline: 0;
				border-color: #11427D;
			}
		}

		.headWarp {
			display flex
			flex-direction column
			align-items center
			margin 80px 60px 60px 60px
			font-weight 900
			font-size 25px
			color #0a2458
			text-align center
			font-family: Times New Roman;

			.line {
				margin-top 10px
				width 200px
				height 1px
				background-color #0a2458
			}
		}

		.el-button--primary /deep/ {
			background-color: #11427D;
			border-color: #11427D;
			border-radius 7px
			margin-right 15px

			span, i {
				font-weight 700
			}
		}

		.inputWidth /deep/ {
			.el-input.is-active .el-input__inner, .el-input__inner:focus {
				border-color: #11427D;
				outline: 0;
			}
		}

		.el-button:hover {
			color: #11427D;
			border-color: #11427D;
			background-color: #e0e5ef;
		}

		.el-checkbox /deep/ {
			.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
				background-color: #0064bc;
				border-color: #0064bc;
			}
			.el-checkbox__input.is-checked+.el-checkbox__label {
				color #11427D;
			}
			.el-checkbox__label {
				/*color #11427D;*/
			}
		}

		.exampleBtn {
			height 40px
			line-height 40px
			font-size 16px
			border-radius 4px
			padding 0 15px
			color: #11427D;
			border: 1px solid #11427D;
			background-color: #e0e5ef;
			cursor:pointer;
		}
	}

</style>
